<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>deep obser</title>
    <script type="text/javascript" , src="../js/vue.js">

    </script>
</head>

<body>

    <div id="root">
        <h1>watch 中的 deep 字段</h1>
        <h2> {{h2}} </h2>
        <button @click="change"> 点击{{h2}} </button>
        <hr />
        <h2> a == {{numbers.a}} </h2>

        <button @click="add">a++</button>

        <h2> b == {{numbers.b}} </h2>
        <button @click="numbers.b++">b++</button>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false

        let vm = new Vue({
            el: '#root',
            data() {
                return {
                    h5: "哈哈",
                    isHot: false,
                    numbers: {
                        a: 1,
                        b: 1
                    }
                }
            },
            computed: {
                h2() {
                    return this.isHot ? "re" : "leng"
                }
            },
            methods: {
                change() {
                    this.isHot = !this.isHot
                },
                add() {
                    this.numbers.a++
                }
            },
            watch: {
                // isHot: {
                //     // immediate:true,//初始化时候调用
                //     // deep:true,
                //     handler(newValue, oldValue) {
                //         console.log(oldValue)
                //         console.log('isHot fixed')
                //         console.log(newValue)
                //     },

                // },
                ///简写
                // isHot(newValue, oldValue) {
                //     console.log(oldValue)
                //     console.log('isHot fixed')
                //     console.log(newValue)
                // }
            },
        })
        vm.$watch(
            'isHot', {
            // immediate:true,//初始化时候调用
            // deep:true,
            handler(newValue, oldValue) {
                console.log(oldValue)
                console.log('vm $ 监视isHot fixed')
                console.log(newValue)
            },
        }
        )
    </script>
</body>

</html>

<!-- 
    watch  KVO  啊 

-->